<template>
	<div class="zy-content">
		<PageOee @orgChange="orgChange" @deviceTypeChange="deviceTypeChange" :showDeviceType="true" subTitle="生产看板">
			<div style="display: flex !important; height: 100%; flex-direction: column">
				<!-- <div style="flex:3; background-color: red">123</div>
				<div style="flex:7; background-color: blue;display:flex;flex-direction:row;
flex-wrap: wrap;justify-content: flex-start;">
					<div style="flex:1;height:120px;min-width: width: calc((100% - 10px) / 3);min-width: calc((100% - 10px) / 3);max-width: calc((100% - 10px) / 3);;background:green;" v-for="item in 30" :key="item">{{item}}</div>
				</div> -->
				<div style="display: flex; gap: 6px; flex: 1">
					<Widget title="当月工单按时完成率" style="flex: 1">
						<div style="flex: 1; height: 200px">
							<Chart1 :all="rateInfo.all" :onTime="rateInfo.onTime" :overTime="rateInfo.overTime" />
						</div>
					</Widget>
					<Widget title="近15天产能达成率" style="flex: 3">
						<div style="flex: 1; height: 200px">
							<Chart3 ref="fiftenChart" />
						</div>
					</Widget>
				</div>
				<div style="margin-top: 10px; flex: 3">
					<Widget title="工单生产统计">
						<template #title-toolbar>
							未完成工单共计 {{ statisticsInfo.未完成工单总计 }} (条)
							<Tags>
								<Tag type="out" color="#3574f8">下发({{ statisticsInfo.下发 }})</Tag>
								<Tag type="out" color="#60cb8f">生产({{ statisticsInfo.生产 }})</Tag>
								<Tag type="out" color="#f5bf41">中断({{ statisticsInfo.中断 }})</Tag>
								<Tag type="out" color="#f17a7c">暂停({{ statisticsInfo.暂停 }})</Tag>
								<Tag type="out" color="#d6dbe2">无工单({{ statisticsInfo.无工单 }})</Tag>
							</Tags>
						</template>
						<template #toolbar>
							<Tags>
								<Tag type="out" color="#60cb8f">运行({{ deviceInfo.runCount }})</Tag>
								<Tag type="out" color="#f5bf41">待机({{ deviceInfo.waitCount }})</Tag>
								<Tag type="out" color="#f17a7c">停机({{ deviceInfo.downtimeCount }})</Tag>
							</Tags>
						</template>
						<div style="flex: 1; display: flex; flex-wrap: wrap; margin: 7px; gap: 1%; row-gap: 4px">
							<card-style-3
								:ref="`${index}_card3`"
								v-for="(item, index) in workProductionStatisticsList"
								:refName="`${index}_chart2`"
								:key="index"
								:deviceCodeState="item.deviceCodeState"
								:currentState="item.currentState"
								:info1="item.deviceNo"
								:info2="item.deviceName"
								:info3="item.predictCompleteTime"
								:info4="item.currentState"
								info5="产品"
								:info6="item.materialCode"
								:info7="item.materialName"
								info8="模具"
								:info9="item.moldCode"
								:info10="item.moldName"
								:info11="item.reportQuantity || 0"
								:info12="item.planProduceQuantity || 0"
								:info13="item.qualifiedRate"
								:info14="item.residueWorkNum"
								:reasonShutdown="item.reasonShutdown"
								:workCode="item.workCode"
							/>
						</div>
					</Widget>
					<div class="pageWrap mt16" v-show="!isFull">
						<pageLeftTitle :total="total" />
						<Page
							:total="total"
							:page-size="pageSize"
							:page-size-opts="isFull ? pageSizeOption1 : pageSizeOption"
							:current="pageNum"
							@on-change="changePageNum"
							@on-page-size-change="changePageSize"
							show-sizer
							show-total
						/>
					</div>
				</div>
			</div>
		</PageOee>
	</div>
</template>

<script>
import PageOee from '@/components/dataBoard/layout/page/index.vue';
import Widget from '@/components/dataBoard/components/widget/index.vue';
import Tags from '@/components/dataBoard/components/tags/index.vue';
import Tag from '@/components/dataBoard/components/tag/index.vue';
import CardStyle3 from './components/card-style3.vue';
import Chart1 from './components/chart1.vue';
import Chart3 from './components/chart3.vue';

export default {
	name: 'oeeBoard2',
	components: {
		PageOee,
		Widget,
		Tags,
		Tag,
		CardStyle3,
		Chart1,
		Chart3,
	},
	data() {
		return {
			workShop: '',
			workProductionStatisticsList: [],
			deviceInfo: [],
			deviceFtline: [],
			statisticsInfo: {},
			rateInfo: {},
			total: 0,
			pageSize: 8,
			pageNum: 1,
			pageSizeOption: [8, 12, 24, 36, 48],
			pageSizeOption1: [15],
			deviceCategory: '',
			myInterval: null,
		};
	},
	mounted() {
		this.searchList();
	},
	watch: {
		isFull() {
			if (this.isFull) {
				this.pageNum = 1;
				this.pageSize = 15;
				this.myInterval = setInterval(() => {
					if (this.total > this.pageSize * this.pageNum) {
						this.pageNum += 1;
					} else this.pageNum = 1;
					this.getWorkProductionStatisticsPage();
				}, 30000);
			} else {
				this.pageNum = 1;
				this.pageSize = 8;
				clearInterval(this.myInterval);
			}
			this.searchList();
		},
	},
	computed: {
		isFull() {
			return this.$store.state.fullScreenState;
		},
	},
	methods: {
		orgChange(val) {
			this.workShop = val;
			this.pageNum = 1;
			this.searchList();
		},
		deviceTypeChange(val) {
			this.deviceCategory = val;
			this.pageNum = 1;
			this.searchList();
		},
		searchList() {
			// if (!this.workShop) {
			//   return;
			// }
			this.getWorkProductionStatisticsPage(); //工单生产统计

			this.getWorkProductionStatistics(); //工单生产统计
			this.getWorkProductionNum(); //设备状态统计
			this.getDeviceStateStatistics(); //近15天产能达成率
			this.getOnTimeCompletionRate(); //按时完成率
		},
		getOnTimeCompletionRate() {
			this.axios({
				url: '/dms/oee-board/onTimeCompletionRate',
				method: 'get',
				params: {
					workShop: this.workShop || ' ',
					deviceCategory: this.deviceCategory,
				},
			}).then((res) => {
				this.$set(this, 'rateInfo', res.data || { all: 0, onTime: 0, overTime: 0 });
			});
		},
		getWorkProductionStatistics() {
			this.axios({
				url: '/dms/oee-board/workProductionStatistics',
				method: 'get',
				params: {
					deviceCategory: this.deviceCategory,
					workShop: this.workShop || ' ',
				},
			}).then((res) => {
				this.$set(this, 'statisticsInfo', res.data || {});
			});
		},
		getWorkProductionStatisticsPage() {
			this.axios({
				url: '/dms/oee-board/workProductionStatisticsPage',
				method: 'post',
				data: {
					workShop: this.workShop || ' ',
					deviceCategory: this.deviceCategory,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
				},
			}).then((res) => {
				this.total = res.data.total || 0;
				this.$set(this, 'workProductionStatisticsList', res.data.list || []);
				// this.$forceUpdate()
			});
		},
		getWorkProductionNum() {
			this.axios({
				url: '/dms/oee-board/deviceStatusStatistics',
				method: 'get',
				params: {
					deviceCategory: this.deviceCategory,
					workShop: this.workShop || ' ',
				},
			}).then((res) => {
				this.deviceInfo = res.data || [];
			});
		},
		getDeviceStateStatistics() {
			this.axios({
				url: '/dms/oee-board/fifteenDayCompletionRate',
				method: 'get',
				params: {
					deviceCategory: this.deviceCategory,
					workShop: this.workShop || ' ',
				},
			}).then((res) => {
				const data = res.data || [];
				const date = data.map((item) => item.date);
				const target = data.map((item) => item.target);
				const qualifiedQuantity = data.map((item) => item.qualifiedQuantity);
				const achievementRate = data.map((item) => item.achievementRate * 100);
				this.$refs.fiftenChart.initChart(date, target, qualifiedQuantity, achievementRate);
			});
		},
		//分页
		changeNum() {
			this.pageNum = 1;
			this.searchList();
		},
		changePageSize(pageSize) {
			this.pageSize = pageSize;
			this.searchList();
		},

		changePageNum(val) {
			this.pageNum = val;
			this.searchList();
		},
	},
};
</script>

<style scoped lang="scss"></style>
